<template>
  <div class="config-page-help" ref="helpRef">
    <div class="btn" @click="helpVisible = !helpVisible">?</div>
    <Transition name="fade">
      <div class="children" v-if="helpVisible">
        <HelpChildren :help-list="helpList"></HelpChildren>
      </div>
    </Transition>
  </div>
</template>
<script setup lang="ts">
import HelpChildren from './HelpChildren.vue';
import { helpList } from './index';
let helpRef = ref(null);
let helpVisible = ref(false);

onMounted(() => window.addEventListener('click', closeHelp));
onUnmounted(() => window.removeEventListener('click', closeHelp));

const closeHelp = (event: MouseEvent) => {
  const target = event.target as HTMLElement;
  nextTick(() => {
    // 不在config-page-help class类中，并且不是在复制 直接关闭
    if (!helpRef.value.contains(target) && helpVisible.value && !target.className.includes('copy-btn')) {
      helpVisible.value = false;
    }
  });
};
</script>
<style lang="scss" scoped src="./index.scss"></style>
